<template>
	<!-- 职位信息 -->
	<view class="positionInformation">
		<view class="empty"></view>
		<view class="main">
			<view class="main-item">
				<view class="main-item-header">
					<view class="user">
						<view class="user-image">
							<image v-if="form.member_info.headimg" :src="form.profilePhoto"></image>
							<image v-else src="@/static/mySelected.png"></image>
						</view>
						<view class="user-main">
							<view class="">
								{{ form.member_info.nickname || form.member_info.mobile }}
							</view>
							<view class="">
								{{ form.create_time }}
							</view>
						</view>
					</view>
					<view class="trade flexjcc">
						{{ form.type_text }}
					</view>
				</view>
				<view class="content-item">
					<text>职位名称：</text>
					{{ form.title }}
				</view>
				<view class="content-item">
					<text>招聘人数：</text>
					{{ form.num }}
				</view>
				<view class="content-item">
					<text>新酬：</text>
					{{ form.salary }}
				</view>
				<view class="content-item">
					<text>职位描述：</text>
					{{ form.desc }}
				</view>
				<view class="content-item">
					<text>经验要求：</text>
					{{ form.experience }}
				</view>
				<view class="content-item">
					<text>性别要求：</text>
					{{ form.sex_text }}
				</view>
				<view class="content-item">
					<text>年龄要求：</text>
					{{ form.age }}
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button @click="dial">一键拨号</button>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			form: {
				member_info: {
					nickname: '',
					headimg: '',
					mobile: '',
				},
				create_time: '',
				// 头像
				profilePhoto: '',
				// 输入框值
				title: '',	// 职位发布
				type: 1,// 类型
				num: '',	// 招聘人数
				salary: '',	// 薪酬
				desc: '',	// 描述
				sex: 0,	// 性别
				experience: '',	// 经验
				age: '',	// 年龄
				mobile: '', // 联系方式
				sex_text: '',
				type_text: '',

			}
		}
	},
	onLoad(options) {
		this.getInfo(options.id)
	},
	methods: {
		// 获取详情
		getInfo(id) {
			$api.jobDetail({ id: id }).then(res => {
				this.form = res.data.data
				this.form.profilePhoto = this.$image + this.form.member_info.headimg
			})
		},
		// 联系
		dial() {
			uni.makePhoneCall({
				phoneNumber: this.form.mobile
			})
		}
	}
}
</script>

<style lang="less" scoped>
.positionInformation {
	background: #FBFBFB;

	.empty {
		height: 14rpx;
	}

	.main {
		.main-item {
			width: 702rpx;
			// height: 376rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			margin: auto;
			padding: 0 28rpx 20rpx 27rpx;
			margin-top: 12rpx;

			.main-item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 31rpx;

				.user {
					display: flex;
					align-items: center;

					.user-image {
						padding-right: 19rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}

					.user-main {
						view:first-child {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #1C1C1D;
						}

						view:last-child {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #A4A4A7;
						}
					}
				}

				// 买家卖家
				.trade {
					width: 96rpx;
					height: 34rpx;
					border-radius: 17rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: #F14500;
				}

				// 买
				.buy {
					background: #EDA321;
				}

				// 卖
				.sell {
					background: #F14500;
				}
			}

			.content-item {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #464646;
				padding: 24rpx 0 0 0;

				text {
					color: #A4A4A7;
				}
			}
		}
	}

	.footer-button {
		padding-top: 674rpx;

		button {
			width: 702rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
}
</style>